<!--
/**
* @author huzhiheng
* @date 2022-02-11
* @desc 项目管理/配置中心
*/
-->
<template>
  <div class="main-card">
      <div class="filter-line">
        <el-button cy-data="create-project" type="primary" @click="showCreate()">创建</el-button>
      </div>
      <div>
        <el-table :data="envData" border style="width: 100%">
          <el-table-column fixed prop="id" label="ID" width="80">
          </el-table-column>
          <el-table-column prop="name" label="名称"> </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.test_type }}</el-tag>
            </template>
            </el-table-column>
          <el-table-column prop="base_url" label="base_url"> </el-table-column>
          <el-table-column prop="browser" label="browser"> </el-table-column>
          <el-table-column prop="env" label="env"> </el-table-column>
          <el-table-column prop="update_time" label="更新时间"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" plain @click="showEdit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" plain @click="deleteEnv(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <EnvDialog v-if="showDailog" @cancel="cancelEnv" :eid=envid></EnvDialog>
  </div>
</template>

<script>
import EnvApi from '../../request/env'
import EnvDialog from './EnvDialog'

export default {
  components: {
    EnvDialog
  },
  data() {
    return {
      loading: false,
      envData: [],
      showDailog: false,
      envid: 0
    }
  },

  mounted() {
    this.initEnvList()
  },
  methods: {
    // 初始化获取环境列表
    async initEnvList() {
      const resp = await EnvApi.GetEnvList();
      if (resp.success === true) {
        this.envData = resp.result;
        // this.$message.success("查询成功")
      } else {
        this.$message.error('查询失败!')
      }
    },
    // 显示创建窗口
    showCreate() {
      this.showDailog = true
    },
    // 显示编辑窗口
    showEdit(obj) {
      this.envid = obj.id
      this.showDailog = true
    },
    // 子组件的回调
    cancelEnv() {
      this.showDailog = false
      this.envid = 0
      this.initEnvList()
    },
    // 删除环境信息
    async deleteEnv(obj) {
      this.envid = obj.id
      const resp = await EnvApi.DeleteEnv(this.envid);
      if (resp.success === true) {
        this.$message.success('删除成功')
        this.initEnvList()
        this.envid = 0
      } else {
        this.$message.error('删除失败!')
      }
    }
  }
}
</script>

<style>
.el-popover.home-popover {
  width: 70px;
  min-width: auto;
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 定义当前组件使用的CSS */
.filter-line {
  height: 50px;
  text-align: left;
}
.foot-page {
  margin-top: 20px;
  float: right;
  margin-bottom: 20px;
}
.project-card {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 15px;
  margin-bottom: 15px
}
</style>
